<template>
    <table border="0" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th>序号</th>
                <th>节点名称</th>
                <th>审批人</th>
                <th>操作</th>
                <th>处理意见</th>
                <th>审批时间</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in tableData">
                <td>{{ index + 1 }}</td>
                <td>{{ item.nodeName }}</td>
                <td>{{ item.handlerName }}</td>
                <td>{{ operationFmt(item.operation) }}</td>
                <td>{{ item.opinion }}</td>
                <td>{{ formatUtil.timeFormat(item.createTime) }}</td>
            </tr>
        </tbody>
    </table>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import http from '@/http.js'
import formatUtil from '@/utils/format.js'

const tableData = ref([])

const props = defineProps({
    taskId: {
        type: String,
        default: ''
    }
})

const operationFmt = (data) => {
    if (data === 'submit') {
        return '提交'
    } else if (data === 'agree') {
        return '同意'
    } else if (data === 'reject') {
        return '驳回'
    } else {
        return '未知操作'
    }
}

const loadData = () => {
    http.fetchForm({
        url: '/flow/task/loadFlowHistory',
        data: {
            taskId: props.taskId
        }
    }).then((res) => {
        tableData.value = res.data
    })
}

onMounted(() => {
    if (props.taskId !== '') {
        loadData()
    }
})
</script>
<style scoped>
@import '@/assets/css/print.css';
</style>
